<template>
  <div class="distribute">
    <middle-title title="活动分布"></middle-title>
    <div class="topContainer">
      <div class="left">
        <div
          class="leftbox"
          v-for="(item, index) in leftChoice"
          :key="index"
          @click="clickLeft(index)"
        >
          <div :class="['left', leftIndex === index ? 'active' : '']"></div>
          <div class="label">{{ item }}</div>
        </div>
      </div>
      <div class="right">
        <div
          :class="['rightbox', rightIndex === index ? 'active' : '']"
          v-for="(item, index) in rightChoice"
          :key="index"
          @click="clickRight(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="bottomEchart" ref="bottomEchart"></div>
  </div>
</template>
<script setup>
import { ref, inject, onMounted } from 'vue'
const echarts = inject('echarts')
let leftIndex = ref(0)
let rightIndex = ref(0)
let leftChoice = ['活动', '任务', '培训']
let rightChoice = ['当月', '当年']
let bottomEchart = ref(null)
let myEchart = null
let data = {
  xdata: ['牌楼', '陆迎', '陆兴', '明日星城', '方斜', '学宫'],
  ydata: [36, 40, 31, 28, 25, 29]
}
onMounted(() => {
  setEchart()
})
const setEchart = () => {
  if (myEchart != null && myEchart != '' && myEchart != undefined) {
    myEchart.dispose() //销毁
  }
  myEchart = echarts.init(bottomEchart.value, null, { renderer: 'svg' })
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
      }
      // borderRadius: 5,
      // borderColor: "#6baab2",
      // borderWidth: 1,
      //   formatter: function (params) {
      //     // params[0].data.nameCode
      //     let dot =
      //       '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>'
      //     return params[0].name + '<br>' + '杆塔数量 ：' + params[0].value
      //   }
    },
    grid: {
      left: '4%',
      right: '4%',
      bottom: '3%',
      top: '12%',
      containLabel: true
    },
    xAxis: {
      data: data.xdata,
      triggerEvent: true,
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#FFFFFF',
          opacity: 0.4
        }
      },
      axisLabel: {
        show: true,
        rotate: 0,
        interval: 0,
        fontSize: 14,
        color: '#FFFFFF'
      }
    },
    yAxis: {
      //   name: '单位：个数',
      //   triggerEvent: true,
      //   nameTextStyle: {
      //     color: 'rgba(255,255,255,1)',
      //     fontSize: 16,
      //     padding: [0, 0, 10, -20]
      //   },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#FFFFFF',
          opacity: 0.4
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#DEDDE0'
        }
      },
      axisLabel: {
        show: true,

        color: '#ffff',
        fontSize: 14
      }
    },
    // color: ["#e54035"],
    series: [
      {
        name: '数量',
        barMinHeight: 10,
        type: 'pictorialBar',
        // barCategoryGap: '60%',
        // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        itemStyle: {
          //barBorderRadius: 5,
          //渐变色
          //
          color: 'rgba(137, 237, 255, 0.6)'
        },
        label: {
          show: true,
          position: 'top',

          color: '#EDDA38',
          fontSize: 18,
          fontWeight: 700
        },
        data: data.ydata
        // z: 10
      }
    ]
  }
  myEchart.setOption(option)
}
const clickLeft = (index) => {
  leftIndex.value = index
}
const clickRight = (index) => {
  rightIndex.value = index
}
</script>
<style scoped lang="scss">
.distribute {
  height: 401px;
  //   background-color: red;
  box-sizing: border-box;
  .topContainer {
    display: flex;
    margin-top: 7px;
    .left {
      display: flex;
      flex: 1;
      .leftbox {
        display: flex;
        align-items: center;
        .left {
          width: 25px;
          height: 25px;
          position: relative;
          box-sizing: border-box;
          background: url('@/assets/images/secondpage/leftAquare.png') no-repeat;
          background-size: 100% 100%;
          &::before {
            content: '';
            position: absolute;
            width: 23px;
            height: 16px;
            background: url('@/assets/images/secondpage/bingo.png') no-repeat;
            background-size: 100% 100%;
            top: 3px;
            left: 0;
            display: none;
          }
          &.active {
            &::before {
              display: block;
            }
          }
        }
        .label {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          position: relative;
          margin: 0 6px 0 40px;
          &::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 14px;
            background: #45d3ec;
            border-radius: 2px;
            top: 5px;
            left: -30px;
          }
        }
        &:nth-child(2) {
          .label {
            &::before {
              background: #ec7845;
            }
          }
        }
        &:nth-child(3) {
          .label {
            &::before {
              background: #45ecaf;
            }
          }
        }
        &.actvie {
          .left::before {
            display: block;
          }
        }
      }
    }
    .right {
      display: flex;
      .rightbox {
        width: 97px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        background: url('@/assets/images/secondpage/button.png') no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        font-size: 16px;
        margin-right: 8px;
        transform: translateX(10px);
        &.active {
          width: 97px;
          height: 34.5px;
          background: url('@/assets/images/secondpage/button_active.png') no-repeat;
          background-size: 100% 100%;
          font-weight: bold;
        }
      }
    }
  }
  .bottomEchart {
    width: 505px;
    height: 300px;
    // background-color: blue;
  }
}
</style>
